<template>
    <div>
        <!-- 地面工具（穿心解卡常用工具） -->
        <a-table :columns="threadCardToolColumns" :data-source="groundToolList" :scroll="{ y: 400 }" :pagination="false">
            <template #bodyCell="{ column, text, record }">
                <template v-if="['requiredNumber', 'alternativeNumber'].includes(column.dataIndex)">
                    <div>
                        <a-input-number v-if="editableData[record.name]"
                            v-model:value="editableData[record.name][column.dataIndex]" :min="0" style="margin: -5px 0" />
                        <template v-else>
                            {{ text ? text : '---' }}
                        </template>
                    </div>
                </template>
                <template v-if="['model'].includes(column.dataIndex)">
                    <div>
                        <a-input v-if="editableData[record.name]"
                            v-model:value="editableData[record.name][column.dataIndex]" style="margin: -5px 0" />
                        <template v-else>
                            {{ text ? text : '---' }}
                        </template>
                    </div>
                </template>
                <template v-if="column.dataIndex === 'action'">
                    <div style="margin-right: 8px;">
                        <span v-if="editableData[record.name]">
                            <a-button type="link" @click="save(record.name)">保存 </a-button>
                            <AntdZh><a-popconfirm title="取消编辑 ?" @confirm="cancel(record.name)">
                                    <a-button type="link">取消</a-button>
                                </a-popconfirm></AntdZh>
                        </span>
                        <span v-else>
                            <a-button type="link" @click="edit(record.name)">编辑</a-button>
                            <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="del(record.name)">
                                    <a-button type="link" danger>删除</a-button>
                                </a-popconfirm></AntdZh>
                        </span>
                    </div>
                </template>
            </template>
        </a-table>
        <a-divider orientation="left">工具补充</a-divider>
        <a-descriptions size="small" bordered :column="3">
            <a-descriptions-item label="常用工具" :span="3">{{ requiredName || "---" }}</a-descriptions-item>
            <a-descriptions-item label="备用工具" :span="3">{{ optionalName || "---" }}</a-descriptions-item>
            <a-descriptions-item label="张力面板备用件" :span="3"> 充电器、张力计销子、电池 </a-descriptions-item>
            <a-descriptions-item label="其它" :span="3"> 卡尺、对讲机</a-descriptions-item>
        </a-descriptions>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { cloneDeep } from 'lodash-es';
import { queryList } from "@/api/tool/threadCardTool.js";
const props = defineProps({
    groundToolList: {
        type: Object,
    },
});
const query = ref({ pageNum: 1, pageSize: 99, sortBy: 'id', searchKey: '', remarks: '' });
const requiredTools = ref([]); // 存储必配工具对象
const optionalTools = ref([]); // 存储选配工具对象
const requiredName = ref('')
const optionalName = ref('')
const editableData = reactive({});
const groundToolList = ref(props.groundToolList)
// 地面工具表
const threadCardToolColumns = ref([
    {
        title: "工具名称",
        dataIndex: "name",
        key: "name",
        width: '18%'
    },
    {
        title: "型号",
        dataIndex: "model",
        key: "model",
        width: '20%'
    },
    {
        title: "必备数量",
        dataIndex: "requiredNumber",
        key: "requiredNumber",
        width: '16%'
    },
    {
        title: "备用数量",
        dataIndex: "alternativeNumber",
        key: "alternativeNumber",
        width: '16%'
    },
    {
        title: "操作",
        dataIndex: "action",
        key: "action",
    }
])

function getList() {
    console.log('groundToolList', props.groundToolList);
    queryList(query.value).then((response) => {
        console.log('地面工具', response);
        response.content.forEach(item => {
            if (item.remarks == '必配') {
                requiredTools.value.push(item)
            } else if (item.remarks == '选配') {
                optionalTools.value.push(item)
            }
        });
        // 对比，过滤重复数据
        requiredTools.value = requiredTools.value.filter(bObject => !props.groundToolList.some(aObject => aObject.name === bObject.name));
        optionalTools.value = optionalTools.value.filter(bObject => !props.groundToolList.some(aObject => aObject.name === bObject.name));
        // 对象数组自身去重
        requiredTools.value = requiredTools.value.reduce((accumulator, currentObject) => {
            // 检查累加器中是否已经包含了相同 name 的对象
            const existingObject = accumulator.find(obj => obj.name === currentObject.name);
            // 如果不存在相同 name 的对象，则将当前对象添加到累加器中
            if (!existingObject) {
                accumulator.push(currentObject);
            }
            return accumulator;
        }, []);
        optionalTools.value = optionalTools.value.reduce((accumulator, currentObject) => {
            const existingObject = accumulator.find(obj => obj.name === currentObject.name);
            if (!existingObject) {
                accumulator.push(currentObject);
            }
            return accumulator;
        }, []);
        // 取出name转为字符串
        requiredName.value = requiredTools.value.map(obj => obj['name']).join(', ');
        optionalName.value = optionalTools.value.map(obj => obj['name']).join(', ');
        // console.log(requiredName.value);
        // console.log(optionalName.value);
    });
}
getList();
// 编辑
const edit = key => {
    editableData[key] = cloneDeep(groundToolList.value.filter(item => key === item.name)[0]);
};
// 取消
const cancel = key => {
    delete editableData[key];
};
// 删
const del = key => {
    groundToolList.value = groundToolList.value.filter(item => item.name !== key);
    getList();
};
// 保存
const save = key => {
    groundToolList.value = groundToolList.value.map(item => {
        if (item.name === key) {
            item = editableData[key]
        }
        return item;
    });
    getList();
    delete editableData[key];
};
</script>